<!DOCTYPE html>
<html class="x-admin-sm">
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.1</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="__ADMIN__/css/font.css">
    <link rel="stylesheet" href="__ADMIN__/css/xadmin.css">
    <!--百度ueditor-->
    <script src="__ADMIN__/plus/ueditor/ueditor.config.js"></script>
    <script src="__ADMIN__/plus/ueditor/ueditor.all.min.js"></script>
    <!--百度ueditor-->
    <script type="text/javascript" src="__ADMIN__/js/jquery.min.js"></script>
    <script type="text/javascript" src="__ADMIN__/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="__ADMIN__/js/xadmin.js"></script>
    <script type="text/javascript" src="__ADMIN__/js/cookie.js"></script>

  </head>
  <script type="text/javascript">
    layui.use('upload', function(){
      var $ = layui.jquery
      ,upload = layui.upload;
      //普通图片上传
      var uploadInst = upload.render({
          elem: '#uploads'
          , url: '{:url("Goods/upload")}'
          , before: function (obj) {
            //预读本地文件示例，不支持ie8
            obj.preview(function (index, file, result){
                //如果有图片再点击上传就撤销原来的图片
                var img=$("#img").attr("src");
                var imgurl=$("#goods_img").val();
                if(img){
                    $.ajax({
                        type:"post",
                        dataType:"json",
                        data:{imgurl:imgurl},
                        url:"{:url('Goods/cancel')}",
                        success:function(data){
                        }
                    });
                }
                $('#img').attr('src', result); //图片链接(base64)
            });
          }
          , done: function (res) {
              //如果上传失败
              if (res.code == 0) {
                  return layer.msg(res.err);
              }
              //上传成功
              if(res.code == 1) {
                  $('#goods_img').attr('value',res.savename);
              }
          }
      });
  });
  </script>
  <body>
    <div class="x-body">
        <form class="layui-form">
          <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
              <li class="layui-this">商品基本信息</li>
              <li>商品描述详情</li>
              <li>商品属性</li>
              <li>商品相册</li>
            </ul>
            <div class="layui-tab-content">
              <!-- 基本信息 -->
              <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                  <label class="layui-form-label"><span class="x-red">*</span>所属分类</label>
                  <div class="layui-input-block">
                    <select name="cat_id" lay-verify="required">
                      {volist name="cateRes" id="cate"}
                      <option value="{$cate.id}"><?php echo str_repeat('---',$cate['level']*2);?>{$cate.name}</option>
                      {/volist}
                    </select>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label"><span class="x-red">*</span>所在仓库</label>
                  <div class="layui-input-block">
                    <select name="cangku_id">
                      <option value="0">请选择</option>
                      {volist name="cangkuRes" id="cangku"}
                      <option value="{$cangku.id}">{$cangku.name}</option>
                      {/volist}
                    </select>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label"><span class="x-red">*</span>供货地</label>
                  <div class="layui-input-inline">
                    <select name="supply_province"  id="supply_province" lay-filter="supply_province">
                      <option value="0">请选择省</option>
                    </select>
                  </div>
                  <div class="layui-input-inline">
                    <select name="supply_city" id="supply_city" lay-filter="supply_city">
                      <option value="0">请选择市</option>
                    </select>
                  </div>
                  <div class="layui-input-inline">
                    <select name="supply_district" id="supply_district" lay-filter="supply_district">
                      <option value="0">请选择县/区</option>
                    </select>
                  </div>
                </div>
                <div class="layui-form-item">
                    <label for="username" class="layui-form-label">
                      商品名称
                    </label>
                    <div class="layui-input-block">
                        <input type="text"  name="goods_name" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="username" class="layui-form-label">
                      商品主图
                    </label>
                    <div class="layui-input-block">
                        <button type="button" style="width: 140px;" class="layui-btn layui-btn-sm layui-btn-normal" id="uploads"><i class="layui-icon">&#xe67c;</i>上传图片</button>
                        <img id="img" src="" width="140px" style="margin-top: 5px;display: block;">
                        <input type="hidden" name="goods_img" id="goods_img" value="" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="username" class="layui-form-label">
                      商品价格
                    </label>
                    <div class="layui-input-block">
                        <input type="text"  name="shop_price" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="username" class="layui-form-label">
                      整售
                    </label>
                    <div class="layui-input-inline">
                        <input type="text"  name="zhengshou" required="" value="1" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">默认为1,不需要整售。其他值，为整售数量</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="username" class="layui-form-label">
                      库存
                    </label>
                    <div class="layui-input-block">
                        <input type="text"  name="inventory" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="username" class="layui-form-label">
                      起订
                    </label>
                    <div class="layui-input-block">
                        <input type="text"  name="qiding" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="username" class="layui-form-label">
                      关键词
                    </label>
                    <div class="layui-input-block">
                        <textarea type="text" name="keywords" autocomplete="off" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="x-red">*</span>上架状态</label>
                    <div class="layui-input-block">
                      <input type="radio" name="on_sale" value="1" lay-skin="primary" title="上架" checked="">
                      <input type="radio" name="on_sale" value="0" lay-skin="primary" title="下架">
                    </div>
                </div>
              </div>
              <!-- 描述详情 -->
              <div class="layui-tab-item">
                <div class="layui-input-block">
                    <textarea type="text" name="goods_content" id="content"></textarea>
                </div>
              </div>
              <!-- 商品属性 -->
              <div class="layui-tab-item">
                <div class="layui-form-item">
                  <label class="layui-form-label"><span class="x-red">*</span>所属类型</label>
                  <div class="layui-input-inline">
                    <select name="goods_type_id" lay-filter="goods_type_id">
                      <option value="">-请选择-</option>
                      {volist name="goodsTypeRes" id="type"}
                      <option value="{$type.id}">{$type.name}</option>
                      {/volist}
                    </select>
                  </div>
                </div>
                <div id="attr_list"></div>
              </div>
              <!-- 商品相册选项卡 -->
              <div class="layui-tab-item">
                <style>
                .layui-upload-img { width: 90px; height: 90px; margin: 0;}
                .pic-more { width:100%; left; margin: 10px 0px 0px 0px;}
                .pic-more li { width:90px; float: left; margin-right: 5px;}
                .pic-more li .layui-input { display: initial; }
                .pic-more li a { position: absolute; top: 0; display: block; }
                .pic-more li a i { font-size: 24px; background-color: #008800; }    
                #slide-pc-priview .item_img img{ width: 90px; height: 90px;}
                #slide-pc-priview li{position: relative;}
                #slide-pc-priview li .operate{ color: #000; display: none;}
                #slide-pc-priview li .toleft{ position: absolute;top: 40px; left: 1px; cursor:pointer;}
                #slide-pc-priview li .toright{ position: absolute;top: 40px; right: 1px;cursor:pointer;}
                #slide-pc-priview li .close{position: absolute;top: 5px; right: 5px;cursor:pointer;}
                #slide-pc-priview li:hover .operate{ display: block;}    
                </style>
                <script>
                  layui.use('upload', function(){
                  var $ = layui.jquery;
                  var upload = layui.upload;            
                  upload.render({
                     elem: '#slide-pc',
                     url: '{:url('admin/Goods/upload')}',
                     size: 500,
                     exts: 'jpg|png|jpeg',
                     multiple: true,
                     before: function(obj) {
                         layer.msg('图片上传中...', {
                                icon: 16,
                                shade: 0.01,
                                time: 0
                            })
                     },
                     done: function(res) {
                        layer.close(layer.msg());//关闭上传提示窗口
                         //$('#slide-pc-priview').append('<input type="hidden" name="pc_src[]" value="' + res.filepath + '" />');
                         $('#slide-pc-priview').append('<li class="item_img"><div class="operate"><i class="toleft layui-icon"></i><i class="toright layui-icon"></i><i  class="close layui-icon"></i></div><img src="__UPLOADS__/goods/' + res.savename + '" class="img" ><input type="hidden" name="goods_photo[]" value="' + res.savename + '" /></li>');
                     }
                 });
                });
                  //点击多图上传的X,删除当前的图片
                  $("body").on("click",".close",function(){
                    var imgurl = $(this).closest("li").find("input").val();
                    $.ajax({
                        type:"post",
                        dataType:"json",
                        data:{imgurl:imgurl},
                        url:"{:url('Goods/cancel')}",
                        success:function(data){
                        }
                    });
                    $(this).closest("li").remove();
                  });
                 //多图上传点击<>左右移动图片
                  $("body").on("click",".pic-more ul li .toleft",function(){
                    var li_index=$(this).closest("li").index();
                    if(li_index>=1){
                      $(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));
                    }
                  });
                  $("body").on("click",".pic-more ul li .toright",function(){
                    var li_index=$(this).closest("li").index();
                    $(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));
                  });
                </script>
                <div class="layui-form-item" id="pics">
                  <div class="layui-form-label">商品相册</div>
                  <div class="layui-input-block" style="width: 70%;">
                    <div class="layui-upload">
                      <button type="button" class="layui-btn layui-btn-primary pull-left" id="slide-pc">选择多图</button>
                      <div class="pic-more">
                        <ul class="pic-more-upload-list" id="slide-pc-priview">
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 商品相册选项卡end -->
            </div>
            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">
                </label>
                <button  class="layui-btn" lay-filter="add" lay-submit="">
                    确定新增
                </button>
            </div>
          </div>

      </form>
    </div>
    <script>
        //实例化编辑器
        UE.getEditor('content',{initialFrameWidth:'80%',initialFrameHeight:800});

        layui.use(['form','layer'], function(){
          $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;

          //城市联动
          //省赋初始值
          $.ajax({
              type:'POST',
              dataType:'json',
              data:{level:1,pid:0},
              url:"{:url('CangKu/getRegion')}",
              success:function(result){
                $.each(result, function(i, item) {
                    $("#supply_province").append("<option value='" + item.region_id + "'>" + item.name + "</option>");
                    form.render();
                });
              }
          });
          //省变化,获取市
          form.on('select(supply_province)', function(data){
            var level = 2;
            var pid = data.value;
            $.ajax({
                type:'POST',
                dataType:'json',
                data:{level:level,pid:pid},
                url:"{:url('CangKu/getRegion')}",
                success:function(result){
                  $("#supply_city").empty();
                  $("#supply_city").append("<option value=''>请选择市</option>");
                  $("#supply_district").empty();
                  $("#supply_district").append("<option value=''>请选择县/区</option>");
                  $.each(result, function(i, item) {
                      $("#supply_city").append("<option value='" + item.region_id + "'>" + item.name + "</option>");
                      form.render();
                  });
                }
            });
          });
          //市变化,获取区/县
          form.on('select(supply_city)', function(data){
            var level = 3;
            var pid = data.value;
            $.ajax({
                type:'POST',
                dataType:'json',
                data:{level:level,pid:pid},
                url:"{:url('CangKu/getRegion')}",
                success:function(result){
                  $("#supply_district").empty();
                  $("#supply_district").append("<option value=''>请选择县/区</option>");
                  $.each(result, function(i, item) {
                      $("#supply_district").append("<option value='" + item.region_id + "'>" + item.name + "</option>");
                      form.render();
                  });
                }
            });
          });

          //监听提交
          form.on('submit(add)', function(data){
            $.ajax({
                type:'POST',
                dataType:'json',
                data:data.field,
                dataType:'json',
                url:"{:url('Goods/add')}",
                success:function(obj){
                  layer.alert(obj.msg, {icon: obj.icon},function(){
                    // 获得frame索引
                    var index = parent.layer.getFrameIndex(window.name);
                    //关闭当前frame
                    parent.layer.close(index);
                    // 可以对父窗口进行刷新 
                    x_admin_father_reload();
                  });
                }
            });
            return false;
          });
          //商品属性处理
          form.on('select(goods_type_id)', function(data){
            var type_id=data.value;
            $.ajax({
                type:"post",
                dataType:"json",
                data:{type_id:type_id},
                url:"{:url('Goods/getGoodsAttr')}",
                success:function(data){
                  var html="";
                  $(data).each(function(k,v){
                      if(v.attr_type == 1){ 
                        var attrValuesArr=v.attr_values.split(",");
                        //单选处理
                        html+="<div class='layui-form-item'>";
                        html+="<label class='layui-form-label' style='padding-top:5px;'><a href='#' onclick='addrow(this)'>[+]</a>&nbsp;&nbsp;"+v.attr_name+"</label>";

                        html+="<div class='layui-input-inline'>";
                        html+="<select name='goods_attr["+v.attr_id+"][]'>";
                        html+="<option value=''>--请选择--</option>";
                        for (var i=0;i<attrValuesArr.length; i++) {
                            html+="<option value='"+attrValuesArr[i]+"'>"+attrValuesArr[i]+"</option>";
                        }
                        html+="</select>";
                        html+="</div>";
                        html+="</div>";
                      }else{
                        //唯一处理
                        if(v.attr_values){  //有默认值
                            html+="<div class='layui-form-item'>";
                            html+="<label class='layui-form-label' style='padding-top:5px;'>"+v.attr_name+"</label>";
                            var attrValuesArr=v.attr_values.split(",");
                            html+="<div class='layui-input-inline'>";
                            html+="<select name='goods_attr["+v.attr_id+"]'>";
                            html+="<option value=''>--请选择--</option>";
                            for (var i=0;i<attrValuesArr.length; i++) {
                                html+="<option value='"+attrValuesArr[i]+"'>"+attrValuesArr[i]+"</option>";
                            }
                            html+="</select>";
                            html+="</div></div>";
                        }else{  //无默认值
                          html+="<div class='layui-form-item'>";
                          html+="<label class='layui-form-label' style='padding-top:5px;'>"+v.attr_name+"</label>";
                          html+="<div class='layui-input-inline'>";
                          html+="<input type='text' name='goods_attr["+v.attr_id+"]' autocomplete='off' class='layui-input'>";
                          html+="</div>";
                          html+="</div>";
                        }
                      }
                  });
                  $("#attr_list").html(html);
                  form.render('select');
                }
            });
          });
        });
        //增加或减少一行
        function addrow(o){
          var div=$(o).parent().parent();
          if($(o).html()=='[+]'){
              var newdiv=div.clone();
              newdiv.find('a').html('[-]');
              newdiv.find('#price').val('');
              div.after(newdiv);
              layui.use(['form'], function(){
                var form = layui.form;
                form.render('select');
              });
          }else{
              div.remove();
              layui.use(['form'], function(){
                var form = layui.form;
                form.render('select');
              });
          }
        }
    </script>
  </body>

</html>